<template>
  <div class="con">
    <el-container>
      <!-- <el-header style="padding:0;height: 56px;">
        <headbox ref="mychild"></headbox>
      </el-header>
      <el-container>
        <el-aside  style="width:200px;background-color:#393D49;">
          <left></left>
        </el-aside>
      <el-container> -->
      <el-main style="padding: 0">
        <!-- 充值提现 -->
        <div class="contbox6_10">
          <p class="titlelist6_10">
            系统设置
            <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>角色管理
          </p>
          <div class="content">
            <div class="sousuojg6_10" style="pading-bottom: 20px">
              <el-form
                :model="formInline"
                class="demo-form-inline"
                label-width="80px"
              >
                <el-form-item label="角色名称" class="status">
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入角色名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="英文名称" class="status">
                  <el-input
                    v-model="formInline.enname"
                    placeholder="请输入英文名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="启用状态" class="status">
                  <el-select
                    v-model="formInline.useable"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="全部" value=""></el-option>
                    <el-option label="开启" value="0"></el-option>
                    <el-option label="停用" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>

            <div class="buttons">
              <el-button
                v-if="isAuth('roleSearch')"
                type="primary"
                @click="search"
                >搜索</el-button
              >
              <el-button v-if="isAuth('roleReset')" @click="result"
                >重置</el-button
              >
              <el-button
                icon="el-icon-plus"
                type="primary"
                @click="add(1)"
                v-if="isAuth('roleAdd')"
                style="margin-left: 40px"
                class="butt"
                >添加角色</el-button
              >
            </div>
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
              stripe
              border
              :row-style="{ height: '0px' }"
              :cell-style="{ padding: '0px' }"
              v-loading="listLoading"
              :fit="true"
            >
              <el-table-column
                prop="name"
                min-width="100"
                show-overflow-tooltip
                label="角色名称"
              ></el-table-column>
              <el-table-column
                prop="enname"
                show-overflow-tooltip
                min-width="100"
                label="英文名称"
              ></el-table-column>
                <el-table-column prop="roleType" min-width="100" label="角色类型"></el-table-column>
              <el-table-column min-width="100" label="是否可用">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.useable"
                    active-color="#56BB8A"
                    @change="saveUpdateRole(scope.row.id, scope.row.useable)"
                    inactive-color="#C0C4CC"
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                prop="createDate"
                min-width="160"
                label="创建时间"
              ></el-table-column>
              <!-- <el-table-column
                prop="remarks"
                min-width="140"
                show-overflow-tooltip
                label="备注"
              ></el-table-column> -->
              <el-table-column min-width="160" label="操作">
                <template slot-scope="scope">
                  <el-button size="text" v-if="isAuth('roleEditor')" @click="add(2, scope.row.id)"
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    v-if="isAuth('assignPermissions')"
                    @click="queryRoleByMenu(scope.row.id)"
                    size="mini"
                    >分配权限</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              style="text-align: right"
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formInline.page"
              :page-size="formInline.number"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[20, 50, 100]"
              :total="totalNum"
            ></el-pagination>
          </div>
        </div>
      </el-main>

      <!-- 添加/编辑 -->
      <addRole
        :addRoleShow="addRoleShow"
        :addRoleType="addRoleType"
        :addRoleId="addRoleId"
        v-on="addRoleSuccess()"
      ></addRole>

      <!-- 分配权限 -->
      <!-- <roleAssignment
        v-if="false"
        :roleAssignmentShow="roleAssignmentShow"
        :roleAssignmentType="roleAssignmentType"
        v-on="roleAssignmentSuccess()"
      ></roleAssignment> -->
      <jurisdictionTree
        ref="selectTree"
        v-show="showBool"
        @handCancel="handCancel"
      />

      <!-- <el-footer style="padding:0;">
      <footerbox></footerbox>
    </el-footer> -->
    </el-container>
    <!-- </el-container>
    </el-container> -->
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https";
import addRole from "./addRole";
import roleAssignment from "./roleAssignment";
import jurisdictionTree from "./jurisdictionTree";
import axios from "axios";
export default {
  data() {
    return {
      showBool: false,
      formInline: {
        page: 1,
        number: 20,
        name: "",
        enname: "",
        useable: "",
        oemUid:
          localStorage.getItem("jurisdiction") == 0
            ? localStorage.getItem("uid")
            : "",
        officeUid:
          localStorage.getItem("jurisdiction") == 2
            ? localStorage.getItem("uid")
            : "",
      },
      roleAssignmentId: 0,
      listLoading: false,
      dataTime: [],
      totalNum: 0, //总页数
      roleAssignmentType: 1,
      form: {},
      tableData: [],
      addRoleShow: false,
      addRoleType: 0,
      roleAssignmentShow: false,
      from: false,
      addRoleId: 0,
      // selectUid:null
    };
  },
  components: {
    addRole,
    roleAssignment,
    jurisdictionTree,
  },
  mounted() {
    this.queryPayActiveList();
  },
  methods: {
    search() {
      this.formInline.page = 1;
      this.queryPayActiveList();
    },
    result() {
      this.formInline.name = "";
      this.formInline.enname = "";
      this.formInline.page = 1;
      this.queryPayActiveList();
    },
    handCancel() {
      // this.$router.go(0)
      this.showBool = false;
      // this.$refs.selectTree.setCheckedKeys([]);
    },
    // 角色分配
    queryRoleByMenu(id) {
      let that = this;
      console.log(id);
      // debugger
      // this.roleAssignmentShow = true
      // this.roleAssignmentId = id
      this.$store.commit("getUserId", id);
      var menusa = this.$store.state.selectUserId;
      // alert(menusa)
      // that.$store.commit("setEcho",[])
      if (menusa) {
        https.queryRoleByMenul({ id: menusa }).then((res) => {
          console.log("传参成功的数据");
          console.log(res);
          console.log(res.data.data.distributorRoles);
          that.$store.commit("setEcho", res.data.data.distributorRoles);
          this.callback1();
        });
      }
      this.showBool = true;
      // setTimeout(()=>{
      //   this.$refs.selectTree.setCheckedNodes()
      // })
    },
    callback1() {
      this.$refs.selectTree.setCheckedNodes();
    },
    // 编辑
    add(type, addRoleId) {
      this.addRoleShow = true;
      this.addRoleType = type;
      this.addRoleId = 0;
      type == 2 && (this.addRoleId = addRoleId);
    },
    saveUpdateRole(id, useable) {
      useable = useable == "0" ? "1" : "0";
      this.listLoading = true;
      let pl = {
        id: id,
        useable: useable,
      };
      https.saveUpdateRole(pl).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false;
          return;
        }
        layer.open({
          content: res.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.queryPayActiveList();
        this.listLoading = false;
      });
    },
    queryPayActiveList() {
      this.listLoading = true;
      if (this.from == true) {
        return;
      }
      this.from = true;
      https.queryRolelist(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false;
          this.from = false;
          return;
        }
        this.tableData = res.data.data;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].useable =
            this.tableData[i].useable == "0" ? true : false;
        }
        this.totalNum = res.data.total;
        this.listLoading = false;
        this.from = false;
      });
    },
    handleSizeChange(val) {
      this.formInline.page = 1; //动态改变
      this.formInline.number = val; //动态改变
      this.queryPayActiveList();
    },
    queryPayActiveLists() {
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
    //编辑/添加
    addRoleSuccess() {
      bus.$on("addRoleSuccess", (res) => {
        this.addRoleShow = res.show;
        this.$refs.selectTree.data = [];
        if (res.type == 1) {
          this.queryPayActiveList();
        }
      });
    },
    roleAssignmentSuccess() {
      bus.$on("roleAssignmentSuccess", (res) => {
        // alert(1212)
        // this.$router.go(0)
        this.roleAssignmentShow = res.show;
        if (res.type == 1) {
          this.$router.go;
          this.queryPayActiveList();
        }
      });
    },
  },
};
</script>
<style scoped>
.content {
  min-width: calc(100% - 40px);
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  float: right;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.con {
  position: relative;
}

.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.buttons > .el-button {
  width: 100px;
  float: left;
  height: 32px;
}
.sousuojg6_10 {
  width: 100%;
}
</style>
